<template>
  <div class="log-form">
      <h2>登录</h2>
      <div class="log-from-item">
          <label for="userName">用户名:</label>
          <input type="text" id="userName" v-model="userNameModel">
          <span class="log-form-error">{{ userError.errorText }}</span>
      </div>
      <div class="log-from-item">
          <label for="password">密码:</label>
          <input type="password" id="password" v-model="passwordModel">
          <span class="log-form-error">{{ psdError.errorText }}</span>
      </div>
      <button class="logn-btn" @click="onLogin">登录</button>
      <span class="log-form-error">{{errorText}}</span>
  </div>
</template>

<script>
export default {
  data () {
      return {
          userNameModel : '',
          passwordModel : '',
          errorText : ''
      }
  },
  computed:{
      userError () {
          let errorText,status
          if (!/@/g.test(this.userNameModel)) {
            status = false
            errorText = '不包含@'
          }
          else{
            status = true
            errorText = ''
          }
          if(!this.userFlag){
            errorText = ''
            this.userFlag = true
          }
          return {
            status,
            errorText
          }
      },
      psdError () {
          let errorText,status
          if (!/^\w{1,6}$/g.test(this.passwordModel)) {
            status = false
            errorText = '密码不是1-6位'
          }
          else{
            status = true
            errorText = ''
          }
          if(!this.psdFlag){
            errorText = ''
            this.psdFlag = true
          }
          return {
            status,
            errorText
          }
      }
  },
  methods:{
      onLogin () {
          if(!this.userError.status || !this.psdError.status){
              this.errorText = '部分选项未通过'
          }
          else{
              this.errorText = '';
              this.$http.get('api/login')
              .then((res)=>{
                //   console.log(res.data.data);
                  this.$emit('has-data',res.data.data)
              },(err)=>{
                  console.log(err);
              })
          }
      }
  }
}
</script>

<style scoped>
.log-from-item{
    margin: 5px 5px 0 5px;
}

.log-from-item input{
    padding: 2px 5px;
}

.log-from-item label{
    display: inline-block;
    width: 60px;
    text-align: left;
}

.logn-btn{
    margin-top: 20px;
    padding: 5px 10px;
    background-color: #4fc08d;
    color: #fff;
    border: none;
}

.log-form-error{
    color: red;
    font-size: 14px;
}
</style>


